<template>
  <div>
    <div style="width: 80%; margin-left: 10%; padding-top: 20px">
      <el-input
        v-model="form.keywords"
        class="input-with-select"
        placeholder="请输入搜索内容"
        @input="searchChange"
      >
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>
    <div style="margin-left: 20px">
      <h3>帮助文档</h3>
    </div>
    <div v-for="(items, index) in dataList" :key="index">
      <div
        style="
          border-bottom: 1px dashed #dcdfe6;
          cursor: pointer;
          cursor: pointer;
        "
        @click="to(items.type_id)"
      >
        <div style="margin-left: 20px">
          <p style="font-size: 18px">{{ items.keyword }}</p>
          <p style="font-size: 10px">{{ items.created_at }}</p>
        </div>
      </div>
    </div>
    <div
      v-if="dataList.length == 0"
      style="
        text-align: center;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #f6f8f9;
      "
    >
      <div>暂无数据</div>
    </div>
    <el-pagination
      v-if="total >= 10"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <!-- <el-button @click="to">跳转</el-button> -->
  </div>
</template>

<script>
  import { helpDocList } from '@/api/help'

  export default {
    name: 'VabErrorLog',
    data() {
      return {
        dataList: [],
        total: '',
        form: {
          pagesize: 10,
          page: 1,
          keywords: '',
        },
      }
    },
    computed: {},
    watch: {},
    beforeMount() {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        helpDocList(this.form).then((e) => {
          this.dataList = e.data.data
          this.total = e.data.total
        })
      },
      searchChange() {
        this.form.pagesize = ''
        this.form.page = ''
        this.init()
      },
      to(e) {
        let routeUrl = this.$router.resolve({
          path: '/helpdoc',
          query: {
            id: e,
          },
        })
        window.open(routeUrl.href, '_blank')
      },
      handleCurrentChange(val) {
        const _this = this
        _this.form.page = val
        this.init()
      },
    },
  }
</script>

<style lang="scss" scoped></style>
